<script setup>
import {ref, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getGoodsInfoById} from "@/api/goods.js";
import {useOrderInfoStore} from "@/stores/index.js";

defineOptions({
  name: "DetailIndex"
})
// 商品总数据
const goods = ref({})
// 外观列表
const appList = ref([])
// 版本列表
const versionList = ref([])
// 购买数据
const buyInfo = ref({
  // 购买人id
  id: 0,
  goods_id: 0,
  // 商品标题
  title: '',
  // 商品价格
  price: 0,
  // 商品外观
  look: '',
  // 商品版本
  version: '',
  // 商品数量
  count: 1
})
// 加减购买数量
const addCount = () => {
  buyInfo.value.count += 1
}
const subCount = () => {
  if (buyInfo.value.count > 1) {
    buyInfo.value.count -= 1
  }
}
// 创建路由
const route = useRoute()
const router = useRouter()
// 获取商品数据
const orderInfoStore = useOrderInfoStore()
const getGoods = async () => {
  const res = await getGoodsInfoById(route.params.id);
  goods.value = res.data
  appList.value = JSON.parse(goods.value.appearance)
  versionList.value = JSON.parse(goods.value.version)
  buyInfo.value.goods_id = goods.value.id
  buyInfo.value.title = goods.value.title
  buyInfo.value.price = goods.value.price
  buyInfo.value.id = orderInfoStore.orderInfo.userId
}
getGoods()
// 计算价格
const totalPrice = computed(() => {
  return parseFloat(buyInfo.value.price * buyInfo.value.count).toFixed(2)
})
// 控制版本样式，获取选择的数据
const selectedIndex = ref()
const selectVersion = (item, index) => {
  selectedIndex.value = index
  buyInfo.value.version = item
}
// 控制外观样式，获取选择的数据
const selectedApp = ref()
const selectApp = (item, index) => {
  selectedApp.value = index
  buyInfo.value.look = item
}
// 立即购买

const buyNow = () => {
  const totalPrice = parseFloat(buyInfo.value.price * buyInfo.value.count).toFixed(2)
  const totalGoodsInfo = ref({
    ...buyInfo.value,
    totalPrice: totalPrice
  })
  orderInfoStore.setGoodsInfo(totalGoodsInfo.value)
  console.log(totalGoodsInfo.value)
  console.log(orderInfoStore.goodsInfo)
  router.push('/order')
}
// 加入购物车
const addToCart = () => {
  console.log('加入购物车：', buyInfo.value)
}
</script>

<template>
  <div class="detail-box">
  <div class="line"></div>
  <el-row v-if="goods" :gutter="0" class="content-container">
    <el-col :lg="3">
    </el-col>
    <el-col :lg="7">
      <div class="image-box">
        <img :src="goods.image" alt="">
      </div>
    </el-col>
    <el-col :lg="11">
<!--      标题-->
      <div class="title-box">
        {{ goods.title }}
      </div>
      <!--        价格-->
      <div class="choose-art1">
        <div class="im-box">
          <img src="https://sky-takeout-ximeng.oss-cn-hangzhou.aliyuncs.com/biaoti.png" alt="">
        </div>
        <div class="app-box">
          <div class="dt"><span>秒 杀 价</span></div>
          <span class="dd">
            <span class="fh">￥  </span>
            <span class="price">{{ parseFloat(totalPrice).toFixed(2) }}</span>
          </span>
        </div>
      </div>
      <!--        外观-->
      <div class="choose-art1">
        <div class="app-box">
          <div class="dt">选择外观</div>
          <div class="dd" v-for="(item, index) in appList" :key="index">
            <div class="item">
              <a
                  :class="{ active: selectedApp === index }"
                  @click="selectApp(item, index)"
                  href="javascript:void(0);">
                <i>{{ item }}</i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--        版本选择-->
      <div class="choose-art1">
        <div class="app-box">
          <div class="dt">选择版本</div>
          <div class="dd" v-for="(item, index) in versionList" :key="index">
            <div class="item">
              <a
                  :class="{ active: selectedIndex === index }"
                  @click="selectVersion(item, index)"
                  href="javascript:void(0);">
                <i>{{ item }}</i>
              </a>
            </div>
          </div>
        </div>
      </div>
<!--      购买-->
      <div class="chose-btns">
        <div class="btn">
          <input class="buy-num" v-model="buyInfo.count" type="number">
          <a class="jia" @click="addCount" href="javascript:void(0);">+</a>
          <a class="jian" @click="subCount" href="javascript:void(0);">-</a>
        </div>
        <el-button
            class="buy-btn"
            size="large"
            @click="buyNow"
            type="success">立即购买</el-button>
        <el-button
            class="buy-btn"
            size="large"
            @click="addToCart"
            type="success">加入购物车</el-button>
      </div>
    </el-col>
    <el-col :lg="3">
    </el-col>
  </el-row>
  </div>
</template>

<style lang="scss" scoped>

.detail-box {

  .line {
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
  }

  .content-container {
    background-color: white;
    height: 550px;

    .title-box {
      margin-top: 12px;
      font: 700 16px Arial, "microsoft yahei";
      color: #666;
      line-height: 28px;
      margin-bottom: 5px;
    }

    .image-box {
      width: 450px;
      height: 450px;
      border: 1px solid #ccc;
      margin-top: 12px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .app-box {
      line-height: 40px;
      width: 100%;
      display: block;
      height: 57px;
      align-content: center;

      .dd {
        margin-left: 14px;

        span {
          color: red;
        }

        .fh {
          font-size: 16px;
        }

        .price {
          font-size: 22px;
        }

        .item {
          float: left;
          margin-left: 20px;

          a {
            display: block;
            border: 1px solid #ccc;
            white-space: nowrap;
            padding: 0 16px;
            transition: all 0s ease;
          }

          a.active {
            border-color: blue;
            color: blue;
          }

        }

      }

      .dt {
        width: 58px;
        height: 40px;
        display: block;
        text-align: center;
        float: left;
      }
    }

    .chose-btns {
      width: 100%;
      height: 42px;
      margin-top: 11px;

      .buy-btn {
        margin-left: 19px;
      }

      .buy-num {
        width: 47px;
        height: 40px;
        border: 1px solid #ccc;
        text-align: center;
      }

      input:focus {
        outline: none;
        box-shadow: none;
      }

      .btn {
        width: 58px;
        height: 44px;
        position: relative;
        float: left;

        .jia {
          top: 0px;
          left: 32px;
        }

        .jian {
          top: 18px;
          left: 32px;
        }

        a {
          display: block;
          width: 15px;
          text-align: center;
          height: 22px;
          line-height: 22px;
          overflow: hidden;
          background: #f1f1f1;
          color: #666;
          position: absolute;
          right: -1px;
          border: 1px solid #ccc;
        }
      }

    }

  }

}
</style>
